<!--
 * @Author: 凉月 1931226988@qq.com
 * @Date: 2023-08-22 16:44:51
 * @LastEditors: 凉月 1931226988@qq.com
 * @LastEditTime: 2023-08-23 20:12:29
 * @FilePath: \v3_xmly\src\components\headerScroll\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="headerScroll">
    <div class="topBar">
      <div
        class="topBar_scroll"
        ref="topBarScroll"
        @touchmove="topBarMove"
        @touchstart="topBarStart"
        @touchend="topBarEnd"
      >
        <div
          :class="{ topBar_scroll_item: true, active: index == topBarIndex }"
          v-for="(item, index) in data.arr"
          :key="item.id"
          @click="changeIndex(index , item.id)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: {}
  },
  index: {
    type: Number,
    required: false,
    default: 0
  }
})

const $emit = defineEmits(['changeIndex'])

const topBarIndex = ref(props.index);

const topBarScroll = ref();
const startX = ref(0);
const moveX = ref(0);
const allX = ref<any>(0);
const maxX = ref(0);

// topBar触发------------------
// 移动topBar
const topBarMove = (e: any) => {
  // 最大值控制
  maxX.value = topBarScroll.value.clientWidth - e.target.clientWidth * 4;
  // 计算移动的量
  moveX.value = e.changedTouches[0].clientX - startX.value;
  const changeX = moveX.value + parseInt(allX.value);
  // 判断是否符合范围区域
  if (changeX > -maxX.value && changeX <= 0) {
    // 从新赋值
    topBarScroll.value.style.left = changeX + "px";
  }
};
// 按下触发
const topBarStart = (e: any) => {
  // 需要获得初始值
  startX.value = e.changedTouches[0].clientX;
};
//抬起触发
const topBarEnd = () => {
  // 需要在这里获取一共移动了多少
  allX.value = topBarScroll.value.style.left;
};

// 切换topBar选中
const changeIndex = (index: number , id:number) => {
  topBarIndex.value = index;
  $emit('changeIndex' , index , id)
};

defineExpose({
  changeIndex
})
</script>

<style scoped lang="less">
@allColor: #f86442;
.headerScroll {
  .topBar {
    position: relative;
    // border: 1px solid skyblue;
    border-bottom: 1px solid #eee;
    height: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    &::-webkit-scrollbar {
      display: none;
    }
    .topBar_scroll {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      width: auto;
      height: 100%;
      align-items: center;
      .topBar_scroll_item {
        position: relative;
        padding: 0 20px;
        flex-shrink: 0;
        font-size: 14px;
        color: rgb(163, 163, 172);
      }
      .topBar_scroll_item.active {
        transform: scale(1.2);
        // font-size: 19px;
        color: black;
      }
      .topBar_scroll_item.active::after {
        content: "";
        position: absolute;
        left: calc(50% - 10px);
        display: block;
        width: 20px;
        border-radius: 10px;
        height: 4px;
        background-color: @allColor;
      }
    }
  }
}
</style>
